<template>
  <div class="touradd">
    <div class="menu">
      <div class="right">
        <div class="txt">
          <span>基本信息</span>
        </div>
        <!-- 基本 -->
        <div class="rightup">
          <el-form
            :inline="true"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" prop="userName">
              <el-input
                v-model="ruleForm.userName"
                :clearable="true"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="工牌" prop="userNumber">
              <el-input
                v-model="ruleForm.userNumber"
                :clearable="true"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="userAge">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model.number="ruleForm.userAge"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="userCareId">
              <el-input
                :clearable="true"
                v-model="ruleForm.userCareId"
                placeholder="请输入内容"
                maxlength="18"
                minlength="18"
              ></el-input>
            </el-form-item>
            <el-form-item label="民族" prop="userClan">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model="ruleForm.userClan"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="userPhone">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model="ruleForm.userPhone"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属单位" prop="userUnit">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model="ruleForm.userUnit"
              ></el-input>
            </el-form-item>
            <el-form-item label="讲解证编号" prop="userExplainNumber">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model="ruleForm.userExplainNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="userSex">
              <el-select v-model="ruleForm.userSex" placeholder="请选择">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="在职状态" prop="userStart">
              <el-select v-model="ruleForm.userStart" placeholder="请选择">
                <el-option label="在职" value="在职"></el-option>
                <el-option label="离职" value="离职"></el-option>
                <el-option label="暂离" value="暂离"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学历" prop="userEdu">
              <el-select v-model="ruleForm.userEdu" placeholder="请选择">
                <el-option label="专科以下" value="专科以下"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="研究生以上" value="研究生以上"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="技术等级" prop="userTechnical">
              <el-select v-model="ruleForm.userTechnical" placeholder="请选择">
                <el-option label="初级" value="初级"></el-option>
                <el-option label="中级" value="中级"></el-option>
                <el-option label="高级" value="高级"></el-option>
              </el-select>
            </el-form-item>
            <div class="txt">
              <span>其他信息</span>
            </div>
            <el-form-item label="语种" prop="userLanguage">
              <el-input
                v-model="ruleForm.userLanguage"
                :clearable="true"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="从业时间" prop="userWorking">
              <div class="block">
                <el-date-picker
                  v-model="ruleForm.userWorking"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="普通话等级" prop="userMandarin">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model="ruleForm.userMandarin"
              ></el-input>
            </el-form-item>
            <el-form-item label="从业年限" prop="workingTime">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model.number="ruleForm.workingTime"
              ></el-input>
            </el-form-item>
            <el-form-item label="讲解机编号" prop="explainNumber">
              <el-input
                :clearable="true"
                placeholder="请输入内容"
                v-model="ruleForm.explainNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="userIntroduction">
              <el-input
                type="textarea"
                v-model="ruleForm.userIntroduction"
                maxlength="120"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item class="send" v-if="isshow">
              <el-button
                type="primary"
                @click="submitForm('ruleForm', ruleForm)"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tourAdd } from "@/network/api/news/news";
export default {
  name: "touradd",
  beforeDestroy() {
    this.isshow = true;
  },
  created() {
    this.isshow = true;
    // console.log(this.$route.query);
    console.log(this.$route.query.show);
    if (this.$route.query.show == "true") {
      this.isshow = true;
    } else if (this.$route.query.show == "false") {
      this.isshow = false;
    }
    console.log(this.$route.query.tourmenudata, 11111111);
    this.ruleForm =
      (this.$route.query.tourmenudata && this.$route.query.tourmenudata.user) ||
      this.ruleForm;
  },
  data() {
    return {
      value: "",
      isshow: false,
      ruleForm: {
        explainNumber: "",
        userAge: 0,
        userCareId: "",
        userClan: "",
        userEdu: "",
        userExplainNumber: "",
        userIntroduction: "",
        userLanguage: "",
        userMandarin: "",
        userName: "",
        userNumber: "",
        userPhone: "",
        userSex: "",
        userStart: "",
        userTechnical: "",
        userUnit: "",
        userWorking: "",
        workingTime: "",
      },
      rules: {
        explainNumber: [
          { required: true, message: "导游机编号", trigger: "blur" },
        ],
        userAge: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        userCareId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "长度在11个字符", trigger: "blur" },
        ],
        userClan: [{ required: true, message: "请输入民族", trigger: "blur" }],
        userEdu: [{ required: true, message: "请输入学历", trigger: "blur" }],
        userExplainNumber: [
          { required: true, message: "请输入讲解证编号", trigger: "blur" },
        ],
        userIntroduction: [
          { required: true, message: "请输入个人介绍", trigger: "blur" },
        ],
        userLanguage: [
          { required: true, message: "请输入语种", trigger: "blur" },
        ],
        userMandarin: [
          { required: true, message: "请输入普通话等级", trigger: "blur" },
        ],
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        userNumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
        ],
        userPhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度在11个字符", trigger: "blur" },
        ],
        userSex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        userStart: [
          { required: true, message: "请输入在职状态", trigger: "blur" },
        ],
        userTechnical: [
          { required: true, message: "请输入技术等级", trigger: "blur" },
        ],
        userUnit: [
          { required: true, message: "请输入从业时间", trigger: "blur" },
        ],
        userWorking: [
          { required: true, message: "请输入从业年限", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 提交
    submitForm(name, data) {
      console.log(data);
      this.$refs[name].validate((valid) => {
        if (valid) {
          alert("提交成功!");
          this.submitBtn(data);
        } else {
          console.log("填写有误");
          return false;
        }
      });
    },

    async submitBtn(data) {
      console.log(data);
      let tourinfomenu = await tourAdd(data);
      console.log(tourinfomenu);
      this.$router.go(0);
      this.ruleForm = {};
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang='scss'>
.touradd {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  .txt {
    margin-bottom: 30px;
    text-align: center;
  }
  .menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 25%;
      background-color: yellow;
    }
    .right {
      margin-left: 20px;
      right: 60%;
      .el-form-item {
        width: 30%;
      }
      .send {
        width: 100%;
        text-align: center;
        margin-top: 20px;
      }
    }
    .tourinfo {
      display: flex;
      width: 90%;
      margin: 0 auto;
      align-items: center;
      color: #606266;
      font-size: 14px;
      .el-input {
        margin-left: 10px;
        width: 88%;
      }
    }
  }
}
</style>